<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据代理</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>

    <body>
        <!---vue中的数据代理：
        1.vue中的数据代理：通过vm对象来代理data对象中属性的值（读/写）
        2.vue代理好处：更加方便的操作data的数据
        3.基本原理：通过Object.defineProperty（）把data对象的所有属性加入到vm上，为每一个添加到vm上的属性指定一个getter或者setter，在函数内部去读/写对应的属性值
        4.data----vm._data.name
        5.只有配置在data里面的数据vue才会做数据代理
        -->
        <div id="part1">
            <h1>Hello ,{{name}}</h1>
            <h1>my name is {{_data.name}}</h1>  <!--vm中的数据可以直接在模型中使用-->
        </div>

        <script type="text/javascript">
            const vm = new Vue({
                data() {
                    return {
                        name: 'Marina',
                    }
                }
            })
            vm.$mount('#part1');

/*
            /!*数据代理：通过一个对象obj2对另外一个的对象obj的属性的操作（读/写）*!/
            let obj = {x: 100}
            let obj2 = {y: 200}
            Object.defineProperty(obj2, 'x', {
                get() {
                    return obj.x
                },
                set(v) {
                    obj.x = v;
                }
            })
*/

            //创建一个对象
            let number = 19;
            let person = {
                name: 'Bob',
                sex: 'male'
            }
            Object.defineProperty(person, 'age', {  //配置项，对定义的age做许多额外的设置
/*
                value: 18,
                enumerable: true, //设置是否可以枚举，默认false
                writable: true,//控制属性是否可以被修改，默认false
                configurable: true,//控制属性是否可以被删除，默认false
                */
                //当有人读取person的age属性时，get（getter）就会被调用，且返回值是age的值
                get() {
                    console.log("有人读取age了")
                    return number;
                },
                //当有人修改person的age属性时，set（setter）就会被调用，且会收到修改的age的值
                set(value) {
                    console.log("有人设置age值了,且值是", value);
                    number = value;
                }

            })

            console.log(person);
            console.log(Object.keys(person));   //遍历一下person里的属性
        </script>
    </body>

</html>